<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../../js/swiper.css">
        <script src="../../js/angular.js" charset="utf-8"></script>
        <script src="../../js/swiper.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <my-swiper></my-swiper>

    </body>
    <script type="text/javascript">

        angular.module('App', [])

        .directive('mySwiper', function () {
            return {
                restrict: "ECMA",
                replace: true,
                template: `
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" ng-repeat="url in imgs">
                            <img ng-src="{{ url }}" alt="" />
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
                `,
                controller: function ($scope) {
                    $scope.imgs = ['imgs/img1.jpg', 'imgs/img2.jpg', 'imgs/img3.jpg'];

                    var mySwiper = new Swiper ('.swiper-container', {
                        loop: true,
                        autoplay: 1000,
                        observer: true,
                        // 如果需要分页器
                        pagination: '.swiper-pagination',
                    })
                }
            };
        })

    </script>
</html>
